<template>
    <div class="page">
        <l-sidebar class="left-side"></l-sidebar>
        <v-article :id="id" class="article"></v-article>
    </div>
</template>

<script>
    import lSidebar from "./components/LSidebar.vue";
    import vArticle from "./components/Article.vue";
    import { useRoute } from "vue-router";
    import { ref } from "vue";

    export default {
        name: "Read",
        components: {
            vArticle,
            lSidebar
        },
        setup() {
            const route = useRoute();
            const id = route.params.id;
            return {
                id
            }
        }
    }
</script>

<style scoped>
.page {
    margin-top: 15px;
}
.left-side {
    display: inline-block;
    margin-left: 15px;
    margin-top: 15px;
}
.article {
    display: inline-block;
    position: absolute;
    right: 10px;
    min-height: 98vh;
    border-radius: 10px;
}

</style>